<template>
  <div :style="{ height: height , position: 'relative' }">
    <div class="panel_title">
      <!-- <c-img iconClass='el-icon-eleme' type='element_icon'></c-img> -->
      <div v-if="tabs.length >0" style="display: flex;gap: 8px;">
        <template v-for="item in tabs">
          <div style="display: flex;align-items: center;">
            <c-img style="display: flex;":src="icon3" v-if="value === item.value"/>
            <span @click="change(item)" :class="value === item.value?'active':'noactive'">{{ item.name }}</span>
          </div>
        </template>
      </div>
      <div v-else style="display: flex;align-items: center;">
        <c-img style="display: flex;":src="icon3" />
        <span >{{ title }}</span>
      </div>
      <slot name="right">
      </slot>
    </div>
    <!-- <div>
      <c-img :src="$img.images_zx" />
    </div> -->
    <slot />
  </div>
</template>
<script>
import icon3 from './images/icon3.png'
export default {
  name: 'Panel',
  props: {
    height: {
      type: String,
      default: 'auto'
    },
    title: {
      type: String,
      default: '基础数据展示'
    },
    tabs:{
      type: Array,
      default: () => {
        return [
          // {
          //   name:'产业',
          //   value:'1'
          // },
          // {
          //   name:'区域',
          //   value:'2'
          // }
        ]
      }
    },
    value:{
      type: String,
      default: '1'
    },
    isCancel: {
      type: Boolean,
      default: true,
    },
  },
  model:{
    prop: 'value',
    event: 'change'
  },
  data () {
    return {
      icon3
    }
  },
  methods:{
    change(item) {
      if (this.tabs.length === 1) return
      if (item.value === this.value && this.isCancel === true) {
        this.$emit('change', '')
      } else {
        this.$emit('change', item.value)
      }

      // this.$emit('change', this.value)
    },
  }
}
</script>
<style lang="scss" scoped>
.panel_title {
  opacity: 1;
  display: flex;
  justify-content: space-between;
  background-image: url('./images/path2.png');
  background-repeat: no-repeat;
  height: 40px;
  align-items: center;
  padding-left: 15px;
  // background: linear-gradient(
  //   342deg,
  //   rgba(93, 187, 255, 0) 33%,
  //   rgba(0, 148, 255, 0.15) 58%,
  //   rgba(93, 187, 255, 0.15) 58%,
  //   rgba(0, 148, 255, 0.0735) 85%,
  //   rgba(36, 159, 249, 0.0996) 85%,
  //   rgba(93, 187, 255, 0) 107%
  // );
  z-index: 0;
  span {
    margin-left: 10px;
    opacity: 1;
    // font-family: 思源黑体;
    font-family: YouSheBiaoTiHei;
    font-size: 20px;
    // font-weight: bold;
    line-height: 20px;
    letter-spacing: 0em;
    color: $main-title-color;
    // text-shadow: 0px 8px 15px rgba(0, 80, 203, 0.61);
  }
  span.noactive {
    color: #b4b0b0;
  }
  span.active {
    color: #ffffff;
  }
}
</style>
